<template>
<Form ref="form" v-slot="{ errors }" @submit="sendSmsCode">
    <div class="space-y-2">        
        <edit-item 
            v-if="registerStore.contactType === 'mobile_phone'"
            key-name="mobile_phone"
            v-model="registerStore.row.mobile_phone"
            :options="{name:'手机号', rules: 'required|mobile_phone'}">                   
        </edit-item>
        <edit-item 
            v-else
            key-name="email"
            v-model="registerStore.row.email"
            :options="{name:'电子邮箱', rules: 'required|email'}">                   
        </edit-item>
        <edit-item 
            key-name="verify"
            v-model="registerStore.row.verify"
            :options="{name:'验证码', rules: 'required|captcha'}"> 
                 <template #title="props" >
                    <span class="text-xs text-base-content/60" @click="refreshCaptcha">看不清？点击图片刷新</span>
                 </template>
            <template #input-item="props" >
                <div class="flex gap-2">
                        <input type="text" 
                        placeholder="请输入验证码"
                        class="input input-bordered flex-1" 
                        :class="{'input-error': props.errorMessage}"
                        v-bind="props.field" />
                        <captcha-img ref="captchaImg" v-model="registerStore.row.captcha_key" class="h-full w-32 bg-gray-100 rounded flex items-center justify-center cursor-pointer"></captcha-img>
                    </div>
             </template>
        </edit-item>
        <edit-item 
            v-show="false"
            key-name="captcha_key"
            v-model="registerStore.row.captcha_key"
            :options="{name:'验证码KEY'}">                   
        </edit-item>
      
    </div>
    <div class="flex justify-between mt-6">
        <button type="button" class="btn btn-outline" @click="registerStore.goToStep($router,0)">
            <font-awesome-icon icon="arrow-left" class="mr-1"></font-awesome-icon>
            上一步
        </button>
        <button type="submit" class="btn btn-primary" :disabled="registerStore.countdown>0 || sending">
            {{registerStore.countdown>0?registerStore.countdown+'秒后重新发送':'发送验证码'}}
            <span v-if="sending" class="loading loading-spinner loading-xs ml-1"></span>
            <font-awesome-icon v-else icon="arrow-right" class="ml-1"></font-awesome-icon>
        </button>
    </div>
</Form>
</template>

<script>
import { Form } from 'vee-validate';
import {editItem,captchaImg} from '@/extensions/components'
import {useRegisterStore} from '@/pages/guest/register/register'
import collect from 'collect.js';
const registerStore = useRegisterStore();
export default {
  components: {
    Form,
    editItem,
    captchaImg
  },
  data() {
    return {
        registerStore,
        sending:false,
        captcha_key:''
    }
  },
  methods: {
    async refreshCaptcha(){
        this.$refs.captchaImg.refreshCaptcha();
    },
    async sendSmsCode(values){
        if(this.sending){
            return;
        }
        this.sending = true;
        //发送短信验证码
        let response
        try{
            response = await this.$request.post('/open/register/send',values);
        }catch(error){
            if (error.response) {
                response = error.response;
            }
        }
        if(response){
            if(response.status==200 && response.data.countdown){
                this.registerStore.startCountdown(response.data.countdown);
                this.registerStore.goToStep(this.$router,2);
            }else if(response.status==422){
                const data = response.data;
                collect(data.errors).each((item,field) => {
                    let message = item;
                    if(typeof item!=='string'){
                        message = collect(item).implode(';');
                    }
                    this.$refs.form.setFieldError(field, message);
                });
                this.refreshCaptcha();
            }
        }
        this.sending = false;
    },
    
  },
  created(){
  }
}
</script>
